<!-- 模板 -->
<template>
    <div class="app__body" :class="{'app__body--show': isRunAnimation}">
        <div class="app__body__logo">
            <img src="../assets/images/logo.png">
        </div>
        <div class="app__body__slogan">
            <img src="../assets/images/loading_slogan.png">
        </div>
        <div class="app__body__info">
            <img src="../assets/images/loading_info.png">
        </div>
        <div class="app__body__car">
            <img src="../assets/images/loading_car.png">
        </div>
    </div>
</template>


<!-- js -->
<script>
    export default{
        data(){
            return{
                isRunAnimation: 0
            }
        },
        mounted(){
            this.$aui.loading.hide();
            
            // 动画开始
            setTimeout(() => {
                this.isRunAnimation = 1;
            }, 10);
        }
    }
</script>

<!-- scss -->
<style scoped lang="scss">
    @import "../styles/common/config.scss";
    .app__body{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
        background: url(path("loading_bg.jpg")) 50% no-repeat;
        background-size: cover;
        &__logo{
            width: 2.2rem;
            height: 1.8rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -1.1rem;
            margin-top: -4.7rem;
            transition: all 0.6s cubic-bezier(0.86, 0, 0.07, 1);
            transform: translateY(-30px);
            opacity: 0;
        }
        &__slogan{
            width: 3.4rem;
            height: 1.7rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -2.4rem; 
            margin-left: -1.7rem;
            transition: all 0.6s cubic-bezier(0.86, 0, 0.07, 1) 0.3s;
            transform: translateY(-30px);
            opacity: 0;

        }
        &__info{
            width: 3.4rem;
            height: 2.4rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -1.7rem;
            margin-top: -0.5rem;
            transition: all 0.6s cubic-bezier(0, 1.6, 0.49, 1.11) 1.6s;
            transform: scale(0);
            opacity: 0;
            transform-origin: 50% 100%;
        }
        &__car{
            width: 3.5rem;
            height: 2.3rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -1.75rem;
            margin-top: 1rem;
            transition: all 0.6s cubic-bezier(0.01, 0.03, 0.04, 0.86) 1s;
            transform: translate(200px, 130px);
            opacity: 0;
        }


        &.app__body--show{
            .app__body__logo{
                transform: translate(0);
                opacity: 1;
            }
            .app__body__slogan{
                transform: translate(0);
                opacity: 1;
            }
            .app__body__info{
                transform: scale(1);
                opacity: 1;
            }
            .app__body__car{
                transform: translate(0);
                opacity: 1;
            }
        }
    }
</style>
